JavaScript tips
参考書籍
https://www.amazon.co.jp/dp/B01F0N36ES?tag=joekyo-22 https://images-fe.ssl-images-amazon.com/images/I/41tHKtRq3%2BL._SL300_.jpg
/icons/hr.icon
文末のセミコロンは省略しない方が無難
予約後
break case catch continue debugger default delete do else finally for function if in instanceof new return switch this throw try typeof var void while with
変数宣言
大文字と小文字は区別される
半角英数、_ $ で構成されていること
jQuery が $ で表現できるのは、この仕様のため
数値で始まらないこと
var は関数スコープ
ブロックスコープにならない
var を指定しない変数はすべてグローバルスコープ
可能なら const let を使ったほうがいい
var と違ってブロックスコープになる
クライアントサイドは var、サーバサイドは const let
型
文字列
数値
真偽値
null
undefined
シンボル (ES6 から)
参照型
object
function
array
リテラル
型に格納できるもの
数値リテラル
整数リテラル
浮動小数点数リテラル
文字列リテラル
配列リテラル
"foo" 'bar' などクォートした文字列
シングルクォートを使ったほうが無難
オブジェクトリテラル
ハッシュのこと
なるべくドットでプロパティにアクセスするようにする
code:hash.js
const h = { foo: 'bar' };
h.foo; // ドットでアクセスする場合は、数字で始まるプロパティにはアクセスできない
比較演算子
等価比較 ==
オペランド (演算子の両端) の型が異なっていても、自動で変換して比較する
1 == '1' // => true
1 == true // => true
配列は参照先アドレスが異なるため等価にならない
[1, 2, 3] == [1, 2, 3] // => false
等値比較 ===
「型が同じ」かつ「値が同じ」場合のみ true
1 === '1' // => false
1 === true // => false
可能な限り等値比較 === を行うようにする
if 文
code:if.js
if(true) {
console.log('true');
} // {} は省略可能だが、絶対に省略しないこと
switch 文
code:switch.js
switch(1) {
case 1:
alert(1);
break; // break がないとこの下も実行される
case 2:
alert(2);
break;
default:
alert(3);
}
while 文
code:while.js
while(true) {
console.log('Hi!');
}
for 文
code:for.js
for(let i = 0, j = 0; i < 10; i++, j++) {
console.log(i + j);
}
for...in はキーを取り出すだけなので、forEach を期待してはいけない
code:forin.js
for(let i in arr) {
console.log(i); // => 0, 1, 2
}
const hash = { foo: 'FOOFOO', bar: 'BARBAR', baz: 'BAZBAZ' };
for(let i in hash) {
console.log(i); // => foo, bar, baz
}
try-catch-finally 文
オーバーヘッドが大きいのでなるべく控えること
code:try.js
try {
throw new Error('error message');
} catch(e) {
// throw された場合のみ実行される
} finally {
// 必ず実行される
}
function
return が省略された場合は、undefined が返却される
new 演算子
コンストラクタを呼び出す
Class 定義
code:class.js
const Person = function(name, age) {
// thisがPersonのインスタンスでない際に、 new 演算子でコンストラクタを呼び出すようにする
if(!(this instanceof Person)) {
return new Person(name, age);
}
this.name = name;
this.age = age;
// 末尾に _ を付けて private 変数の代りにする
this.nickname_ = name + 'ちゃん';
};
Person.prototype.getName = function() {
return this.name;
};
// 末尾に _ を付けて private method の代わりにする
Person.prototype.debug_ = function() {
console.log(this.getName());
}
class Hoge() { ... } みたいにひとまとまりのブロックで定義したい。
code:class_block.js
const Person = (function() {
const Person = function(name, age) {
if(!(this instanceof Person)) {
return new Person(name, age);
}
this.name = name;
this.age = age;
this.nickname_ = name + 'ちゃん';
};
Person.prototype.getName = function() {
return this.name;
};
return Person;
})();
複雑に見えるだけでなんか微妙・・・、もとのやつの方が良さそう
慣れなたらこっちの方がよかった
Atom